<template>
  <div class="dashboard-container">
    <el-card 
      class="box-card" 
      v-loading="loading"
    >
      <div class="top">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="primary"
          icon="el-icon-edit"
          class="addUser"
          size="mini"
          @click="onAdd"
        >
          新增试题
        </el-button>
      </div>
      <!-- 表单输入框 -->
      <el-form 
        ref="form" 
        :model="form" 
        label-width="80px" 
        :inline="true"
      >
         <el-form-item label="学科">
          <el-select 
            v-model="form.subjectID" 
            placeholder="请选择" 
            class="form-with" 
            @change="onSubjectChange"
          >
            <el-option 
              :label="item.label" 
              :value="item.value" 
              v-for="item in simpleList.data" 
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select 
            v-model="form.catalogID" 
            placeholder="请选择" 
            class="form-with"
          >
            <el-option 
              :label="item.label" 
              :value="item.value" 
              v-for="item in directorysSimpleList.data" 
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select 
            v-model="form.tags" 
            placeholder="请选择" 
            class="form-with"
          >
            <el-option 
              :label="item.label" 
              :value="item.value" 
              v-for="item in tagsSimpleList.data" 
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input 
            v-model="form.keyword" 
            placeholder="根据题干搜索" 
            class="form-with"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select 
            v-model="form.questionType" 
            placeholder="请选择" 
            class="form-with"
          >
            <el-option 
              :label="item.label" 
              :value="item.value" 
              v-for="item in getDuestionType" 
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select 
            v-model="form.difficulty" 
            placeholder="请选择" 
            class="form-with"
          >
            <el-option 
              :label="item.label" 
              :value="item.value" 
              v-for="item in getDifficulty" 
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select 
            v-model="form.direction" 
            placeholder="请选择" 
            class="form-with"
          >
            <el-option 
              :label="item" 
              :value="item" 
              v-for="item in getDirection" 
              :key="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select
            v-model="form.creatorID" 
            placeholder="请选择" 
            class="form-with"
          >
            <el-option 
              :label="item.username" 
              :value="item.id" 
              v-for="item in userSimpleList.data" 
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input 
            v-model="form.remarks" 
            class="form-with"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input 
            v-model="form.shortName" 
            class="form-with"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select 
            v-model="form.province" 
            placeholder="请选择" 
            class="form-with-city"
          >
            <el-option
              :label="province"
              :value="province"
              v-for="(province, i) in getProvincesList"
              :key="i"
            ></el-option>
          </el-select>
          <el-select 
            v-model="form.city" 
            placeholder="请选择" 
            class="form-with-city"
          >
            <el-option
              :label="city"
              :value="city"
              v-for="(city, i) in getCityList"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 搜索/清除按钮 -->
        <el-button
          class="remove-btn"
          @click="onRemoveAll"
        >
          清除
        </el-button>
        <el-button
          type="primary"
          @click="onSearchChoiceList"
          v-loading="loading"
        >
          搜索
        </el-button>
      </el-form>
      <!-- 分页 -->
      <el-tabs 
        v-model="activeName" 
        type="card" 
        @tab-click="handleClick"
      >
        <el-tab-pane 
          label="用户管理"
          name="first"
        >
        </el-tab-pane>
        <el-tab-pane 
          label="待审核" 
          name="second"
        >
        </el-tab-pane>
        <el-tab-pane 
          label="已审核" 
          name="third"
        >
        </el-tab-pane>
        <el-tab-pane 
          label="已拒绝" 
          name="fourth"
        >
        </el-tab-pane>
         <!-- 提示 -->
          <el-alert
            :closable="false"
            :title="`数据一共${questionChoice.counts}条`"
            type="info"
            class="hint"
            show-icon>
          </el-alert>
          <!-- 列表 -->
          <my-table
          class="container"
          :table-props="{
            data: questionChoice.items,
            border: true
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 180, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center'},
            { label: '目录', prop: 'catalogID', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', slotName: 'question', width: 180, align: 'center' },
            { label: '录入时间', prop: 'addDate', sortable: true, align: 'center', width: 180 },
            { label: '难度', prop: 'difficulty', align: 'center',width: 180},
            { label: '录入人', prop: 'creator', width: 180, width: 180, align: 'center'},
            { label: '审核状态', prop: 'chkState', width: 180, width: 180, align: 'center'},
            { label: '审核意见', prop: 'chkRemarks', width: 180, width: 180, align: 'center'},
            { label: '审核人', prop: 'chkUser', width: 180, width: 180, align: 'center'},
            { label: '发布状态', prop: 'publishState', width: 180, width: 180, align: 'center'},
            { label: '操作', width: 180, align: 'center', slotName: 'handle', width: 300, fixed: 'right'},
          ]"

          :pagination-props="{
            layout: 'sizes, prev, pager, next, jumper',
            total: questionChoice.counts,
            currentPage: page,
            pageSize: pageSize,
            pageSizes: [10, 20, 30, 40],
          }"
          :pagination-events="{
            'current-change': onCurrentPageChange,
            'size-change': onPageSizeChange
          }"
        >
          <template v-slot:handle="scope" >
            <el-button 
              type="text" 
              @click="onPreview(scope.row.id)"
            >
              预览
            </el-button>
            <el-button 
              type="text" 
              @click="onAudit(scope.row.id)" 
              :disabled="scope.row.chkState === '已拒绝' || scope.row.chkState === '已审核'"
            >
              审核
            </el-button>
            <el-button 
              type="text" 
              @click="onEdit(scope.row.id)" 
              :disabled="scope.row.publishState === '已上架'"
            >
              修改
            </el-button>
            <el-button 
              type="text" 
              @click="onAddChoice(scope.row)"
            >
              {{scope.row.publishState === '已上架' ? '下架' : '上架'}}
            </el-button>
            <el-button 
              type="text" 
              @click="onRemove(scope.row.id)" 
              :disabled="scope.row.publishState === '已上架'"
            >
              删除
            </el-button>

          </template>
          <template v-slot:question="scope" >
            <span v-html="scope.row.question"></span>
          </template>
          </my-table>
      </el-tabs>


      <!-- 审核 -->
      <el-dialog
        title="提示"
        :visible.sync="auditVisible"
        width="300"
      >
        <el-radio-group 
          v-model="auditRadio" 
          class="audit-radio"
        >
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
          <el-input 
            type="textarea" 
            v-model="auditOpinion" 
            placeholder="请输入审核意见"
          >
          </el-input>
        <span 
          slot="footer" 
          class="dialog-footer"
        >
          <el-button @click="auditVisible = false">取 消</el-button>
          <el-button 
            type="primary" 
            @click="onAuditOk"
          >
            确 定
          </el-button>
        </span>
      </el-dialog>

      <!-- 预览 -->
      <el-dialog
        title="预览"
        :visible.sync="previewVisible"
        width="80%"
      >
        <div class="question-info">
          <div>【题型】:{{questionDetail.questionType}}</div>
          <div>【编号】:{{questionDetail.id}}</div>
          <div>【难度】:{{questionDetail.difficulty}}</div>
          <div>【标签】:{{questionDetail.tags}}</div>
          <div>【学科】:{{questionDetail.subjectName}}</div>
          <div>【目录】:{{questionDetail.directoryName}}</div>
          <div>【方向】:{{questionDetail.direction}}</div>
        </div>
        <hr>
        <div>
          【题干】:
          <div v-html="questionDetail.question"></div>
          <div>
           <div>{{questionDetail.questionType}}  选项:（以下选中的选项为正确答案）</div>
            <template >
              <el-radio-group 
                v-model="radio" 
                class="radio"
              >
                <el-radio
                  :label="item.isRight"
                  v-for="item in questionDetail.options"
                  :key="item.id"
                  v-show="questionDetail.questionType === '单选题'"
                >
                  {{item.code}}:
                  {{item.title}}
                </el-radio>
              </el-radio-group>
            </template>
            <template>
              <el-checkbox-group 
                v-model="radio" 
                class="checkbox"
              >
                <el-checkbox
                  :label="item.isRight"
                  v-for="item in questionDetail.options"
                  :key="item.id"
                  v-show="questionDetail.questionType === '多选题'"
                >
                  {{item.code}}:
                  {{item.title}}
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </div>
        </div>
        <hr>
        <div>
          【参考答案】:
          <el-button 
            type="danger" 
            size="mini" 
            @click="onVideo"
          >
            视频答案预览
          </el-button>
          <div>
            <video 
              :src="questionDetail.videoURL"  
              width="320" 
              height="240" 
              controls 
              v-show="videoVisible"
            >
            </video>
          </div>
        </div>
        <hr>
        <div>
          <span>【答案解析】: </span> 
          <span v-html="questionDetail.answer"></span>
        </div>
        <hr>
        <div>
          【题目备注】: {{questionDetail.remarks}}
        </div>
        <span 
          slot="footer" 
          class="dialog-footer"
        >
          <el-button 
            type="primary"
            @click="previewVisible = false"
          >
            关闭
          </el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
let currentId = null
let tabState = null
import * as citysApi from '../../api/hmmm/citys';
import { mapActions, mapState } from 'vuex'
import * as constantsApi from '../../api/hmmm/constants'
import * as questionApi from '../../api/hmmm/questions'
export default {
  name: 'QuestionChoice',
  data () {
    return {
      tabState: '',
      activeName: 'first',
      videoVisible: false,
      radio: 1,
      auditRadio: 1,
      auditOpinion: '',
      loading: false,
      previewVisible: false,
      form: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
      },
      page: 1,
      pageSize: 10,
      addVisible: false,
      visible: false,
      auditVisible: false
    }
  },
  computed: {
    ...mapState('questions', ['questionList', 'questionDetail', 'questionChoice']),
    ...mapState('subject', ['simpleList']),
    ...mapState('userSimple', ['userSimpleList']),
    ...mapState('tags', ['tagsSimpleList']),
    ...mapState('directorys', ['directorysSimpleList']),
    // 获取城市列表
    getProvincesList() {
      return citysApi.provinces()
    },
    // 获取城市下边地区列表
    getCityList() {
      return citysApi.citys(this.form.province)
    },
    // 获取方向
    getDirection() {
      return constantsApi.direction
    },
    // 获取题型
    getDuestionType() {
      return constantsApi.questionType
    },
    // 获取难度
    getDifficulty() {
      return constantsApi.difficulty
    },

  },
  methods: {
    ...mapActions('questions', ['updateQuetionList', 'updateQuetionDetail', 'updateQuetionChoice']),
    ...mapActions('subject', ['updateSimpleList']),
    ...mapActions('userSimple', ['updateUserSimpleList']),
    ...mapActions('tags', ['updateTagsSimpleList']),
    ...mapActions('directorys', ['updateDirectorysSimpleList']),
    // 获取二级目录/标签
    onSubjectChange(val) {
      this.updateTagsSimpleList({id: val})
      this.updateDirectorysSimpleList({id: val})
    },
    // 点击下一页
    onCurrentPageChange(val) {
      this.page = val
      this.updateQuetionChoice({
        // ...this.form,
        page: this.page,
        pagesize: this.pageSize
      })
    },
    onPageSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.updateQuetionChoice({
        // ...this.form,
        page: this.page,
        pagesize: this.pageSize
      })
    },
    // 清除按钮
    onRemoveAll() {
      this.form = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
      }
    },
    // 搜索按钮
    async onSearchChoiceList() {
      this.loading = true
      await this.updateQuetionChoice({
        ...this.form,
        page: this.page,
        pagesize: this.pageSize
      })
      this.loading = false
    },
    // 分页
    handleClick(tab, event) {
      tabState = tab.$options.propsData.name
      this.getChangeState(tabState)
    },
    // 不同状态不同请求
    getChangeState(tabState) {
      switch(tabState) {
        case 'first':
          this.updateQuetionChoice({
          page: this.page,
          pagesize: this.pageSize,
        })
          break;
        case 'second':
          this.updateQuetionChoice({
          difficulty: 3,
          page: this.page,
          pagesize: this.pageSize,
          chkState: 0
        })
          break;
        case 'third':
          this.updateQuetionChoice({
          page: this.page,
          pagesize: this.pageSize,
          chkState: 1
        })
          break;
        case 'fourth':
          this.updateQuetionChoice({
          page: this.page,
          pagesize: this.pageSize,
          chkState: 2
        })
          break;
        default:
          this.updateQuetionChoice({
          page: this.page,
          pagesize: this.pageSize,
          })
          break;
      }
    },
    // 审核企业
    async onAudit(id) {
      this.auditVisible = true
      currentId = id
    },
    // 审核确定
    async onAuditOk() {
      if(!this.auditOpinion) {
        this.$message.warning('请输入审核意见')
      } else{
        await questionApi.choiceCheck({
          chkRemarks: this.auditOpinion,
          chkState: this.auditRadio,
          id: currentId
        })
          .then(res => this.$message.success('操作成功'))
          .catch(err => this.$message.error('操作失败'))
        this.getChangeState(tabState)
        this.auditVisible = false
      }

    },
    // 删除
    onRemove(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        await questionApi.remove({id})
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.loading = false
        this.getChangeState(tabState)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      },
    // 是否上下架
    onAddChoice(scope) {
      this.$confirm(`您确认${scope.publishState === '已上架' ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        await questionApi.choicePublish({
          id: scope.id,
          publishState: scope.publishState === '已上架' ? '0' : '1'
        })
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.loading = false
        this.getChangeState(tabState)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作失败'
        });
      });
    },
    // 预览
    async onPreview(id) {
      this.loading = true
      await this.updateQuetionDetail({id})
      this.previewVisible = true
      this.loading = false
      // console.log(this.questionDetail)
    },
    // 视频
    onVideo() {
      this.videoVisible = true
    },
     // 新增
    onAdd() {
      this.$router.push('new')
    },
    // 修改
    onEdit(id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id,
        }
      })
    }
  },
  async created () {
    this.loading = true
    await this.updateSimpleList()
    this.updateQuetionList()
    this.updateUserSimpleList()
    this.updateQuetionChoice()
    this.loading = false
  }
}
</script>

<style lang="scss" scoped>

.dashboard-container {
  padding: 16px;

  .remove-btn {
    margin-left: 18px;
  }
  .top {
    margin-bottom: 16px;

    .addUser {
      float: right;
      background-color: #7ec050;
      border: none;
    }
    .explain {
      font-size: 12px;
      color: #f7ced5;
    }

  }
  .link {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  .hint {
    margin-bottom: 10px;
  }
  .form-with{
    width: 180px;;
  }
  .form-with-city {
    width: 90px;
  }
  .question-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    div {
      margin-top: 10px;
    }
  }
  .radio,
  .checkbox {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
  .video {
    width: 500px;
    height: 400px;
  }
  .audit-radio {
    margin-bottom: 16px;
  }
}
</style>
